<template>
      <h2 style="text-align:center;">用户详细信息注册页</h2>
      <table>
        <tr>
            <td>真实姓名</td>
            <td>
                <input type="text" placeholder="请输入用户名" v-model="info.U_Name"/>
            </td>
        </tr>
        <tr>
            <td>联系方式</td>
            <td>
                <input type="text"  placeholder="请输入联系方式" v-model="info.U_Phone"/>
            </td>
        </tr>
        <tr>
            <td>性别</td>
            <td>
                <input type="radio" value="false" checked  v-model="info.U_Sex"/>男
                <input type="radio" value="true"  v-model="info.U_Sex"/>女
            </td>
        </tr>
        <tr>
            <td>身份证号</td>
            <td>
                <input type="text"  placeholder="请输入身份证号" v-model="info.U_IdCard" @change="GetBirthday"/>
            </td>
        </tr>
        <tr>
            <td>出生日期</td>
            <td>
                <input type="date"  placeholder="请输入出生日期" v-model="info.U_Date"/>
            </td>
        </tr>
        <tr>
            <td>用户年收入</td>
            <td>
                <input type="text"  placeholder="请输入用户年收入" v-model="info.U_Income"/>
            </td>
        </tr>
        <tr>
            <td>用户类型</td>
            <td>
                <select v-model="info.UT_Id">
                    <option value="0">--请选择--</option>
                    <option  v-for="item in UTinfo" :value="item.UT_Id">{{item.UT_Name}}</option>
                </select>
            </td>
        </tr>
        <tr>
            <td colspan="2">
                <input type="button" value="提交" @click="SaveData"/>
            </td>
        </tr>
      </table>
</template>
<script setup lang="ts">
import {useRoute} from 'vue-router'
import { onMounted,ref} from 'vue';
import axios from 'axios';

//创建路由数据对象实例
const route = useRoute();
//alert(route.params.Uid);

//创建响应式数据用于接受用户类型信息
const UTinfo = ref([{
    UT_Id:0,
    UT_Name:""
}]);

const info = ref({
     U_Name:"",
     U_Phone:"",
     U_Sex:false,
     U_IdCard:"",
     U_Date:"",
     U_Income:"",
     UT_Id:0
})

//生命周期函数勾
onMounted(() => {
    LoadUserType();
})

//完成用户类型信息加载
const LoadUserType =()=>{
      axios({
         url:"https://localhost:44337/api/Users/ShowUserType",
         method:"get"
      }).then(res=>{
          console.log(res.data)
          UTinfo.value = res.data
      })
}

const SaveData = () =>{
     //判断真实姓名不能为空
     if(info.value.U_Name == ""){
        alert("真实姓名不能为空");
        return;
     }
     //判断联系方式不能为空
     if(info.value.U_Phone == ""){
        alert("联系方式不能为空");
        return;
     }
     const dd = /^1(3\d|4[5-9]|5[0-35-9]|6[567]|7[0-8]|8\d|9[0-389])\d{8}$/;
     //判断联系方式格式是否正确
     if(!dd.test(info.value.U_Phone)){
        alert("联系方式格式不正确");
        return;
     }
     //判断身份证号不能为空
    if(info.value.U_IdCard=="")
    {
        alert('身份证号不能为空!')
        return;
    }
    const rue = /^(\d{6})(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12]\d|3[01])\d{3}(\d|X|x)$/;
    //判断身份证号格式是否正确
    if(!rue.test(info.value.U_IdCard))
    {
        alert('身份证号格式不正确!')
        return
    }
   //判断年收入不能为空
   if(info.value.U_Income == ""){
        alert("年收入不能为空");
        return;
    }
    //判断输入数据是否为数字
    if(isNaN(Number(info.value.U_Income)))
    {
        alert("年收入必须为数字");
        return;
    }
    axios.post('https://localhost:44337/api/Users/AddUserRegister',{
        U_Id:route.params.Uid,
        U_Name:info.value.U_Name,
        U_Phone:info.value.U_Phone,
        U_Sex:info.value.U_Sex,
        U_IdCard:info.value.U_IdCard,
        U_Date:info.value.U_Date,
        U_Income:info.value.U_Income,
        UT_Id:info.value.UT_Id
    }).then(res=>{
         if(res.data>0)
         {
            alert('用户详细信息注册成功!')
         } else{
            alert('用户详细信息注册失败!')
         }
    }).catch(error=>{
        console.log(error);
    })
}
//根据输入的身份证号获取出生日期
const GetBirthday=()=>{
        //1.通过截取方法获取用户出生日年月
        var birthday = info.value.U_IdCard.substring(6,14);
        //获取车身年份
        var Uyear = birthday.substring(0,4);
        //获取出生月份
        var Umonth = birthday.substring(4,6);
        //获取出生日
        var Uday = birthday.substring(6,8);
        //2.将获取到的年月日拼接成字符串
        var birthdayStr = Uyear + "-" + Umonth + "-" + Uday;
        //3.将字符串赋值给出生日期
        info.value.U_Date = birthdayStr;
}


</script>